<!-- 文件管理模块内容 -->
<div class="main-container">
  <!-- 文件浏览器区域 -->
  <div class="file-browser-container">
    <!-- 本地文件面板 -->
    <div class="file-panel local-panel">
      <div class="panel-header">
        <h3>本地文件</h3>
        <div class="panel-toolbar">
          <input type="text" class="path-input" id="localPath" readonly>
          <button class="btn-icon" id="localUpBtn" title="上一级"><img src="../assets/fh.svg" alt="返回" style="width: 16px; height: 16px;"></button>
          <button class="btn-icon" id="localRefreshBtn" title="刷新"><img src="../assets/sx.svg" alt="刷新" style="width: 19.2px; height: 19.2px; transform: translate(1px, 1px);"></button>
          <button class="btn-icon" id="localHomeBtn" title="主目录"><img src="../assets/zhuye.svg" alt="主页" style="width: 20.8px; height: 20.8px; transform: translate(1px, 1px);"></button>
        </div>
      </div>
      <div class="file-list" id="localFileList">
        <div class="file-list-header">
          <span class="col-checkbox">
            <input type="checkbox" id="localSelectAll" title="全选">
          </span>
          <span class="col-name">名称</span>
          <span class="col-size">大小</span>
          <span class="col-modified">修改时间</span>
          <span class="col-actions">操作</span>
        </div>
        <div class="file-list-body" id="localFiles"></div>
      </div>
    </div>

    <!-- 远程文件面板 -->
    <div class="file-panel remote-panel">
      <div class="panel-header">
        <h3>远程文件</h3>
        <div class="panel-toolbar">
          <input type="text" class="path-input" id="remotePath" readonly>
          <button class="btn-icon" id="remoteUpBtn" title="上一级"><img src="../assets/fh.svg" alt="返回" style="width: 16px; height: 16px;"></button>
          <button class="btn-icon" id="remoteRefreshBtn" title="刷新"><img src="../assets/sx.svg" alt="刷新" style="width: 19.2px; height: 19.2px; transform: translate(1px, 1px);"></button>
          <button class="btn-icon" id="remoteHomeBtn" title="根目录"><img src="../assets/zhuye.svg" alt="主页" style="width: 20.8px; height: 20.8px; transform: translate(1px, 1px);"></button>
        </div>
      </div>
      <div class="file-list" id="remoteFileList">
        <div class="file-list-header">
          <span class="col-checkbox">
            <input type="checkbox" id="remoteSelectAll" title="全选">
          </span>
          <span class="col-name">名称</span>
          <span class="col-size">大小</span>
          <span class="col-modified">修改时间</span>
          <span class="col-actions">操作</span>
        </div>
        <div class="file-list-body" id="remoteFiles"></div>
      </div>
    </div>
  </div>
  
  <!-- 批量操作面板 -->
  <div class="batch-operation-panel" id="batchOperationPanel" style="display: none;">
    <div class="batch-info">
      <span id="batchCount">已选择 0 个文件</span>
    </div>
    <div class="batch-actions">
      <button class="btn-batch btn-cancel" id="batchCancelBtn">取消选择</button>
      <button class="btn-batch btn-upload" id="batchUploadBtn" style="display: none;">批量上传</button>
      <button class="btn-batch btn-download" id="batchDownloadBtn" style="display: none;">批量下载</button>
    </div>
  </div>
</div>

<!-- 通知面板 -->
<div class="notification-panel" id="notificationPanel">
  <div class="notification-header">
    <h3>通知中心</h3>
    <button class="btn-close" id="closeNotificationBtn">✕</button>
  </div>
  <div class="notification-actions">
    <button class="btn-small" id="markAllReadBtn">全部已读</button>
    <button class="btn-small" id="clearReadNotificationsBtn">清除已读</button>
  </div>
  <div class="notification-list" id="notificationList">
    <!-- 通知将动态添加到这里 -->
  </div>
</div>

<!-- 设置面板 -->
<div class="settings-panel" id="settingsPanel">
  <div class="settings-header">
    <h3>⚙️ 设置</h3>
    <button class="btn-close" id="closeSettingsBtn">✕</button>
  </div>
  <div class="settings-content">
    <div class="settings-section">
      <h4>传输设置</h4>
      <div class="setting-item">
        <label>最大并发传输数：</label>
        <input type="number" id="maxConcurrentInput" min="1" max="10" value="3">
      </div>
    </div>
    <div class="settings-section">
      <h4>日志</h4>
      <div class="setting-item">
        <button class="btn" id="openLogBtn">打开日志文件</button>
      </div>
    </div>
    <div class="settings-section">
      <h4>关于</h4>
      <p>文件同步器 v1.0.0</p>
      <p>支持FTP文件传输，断点续传，多并发</p>
    </div>
  </div>
</div>

<!-- 需要加载 main.css 样式 -->
<link rel="stylesheet" href="./styles/main.css">

<style>
  /* 批量操作面板样式 */
  .batch-operation-panel {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) scale(0.9, 0.75);
    transform-origin: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 1000;
    animation: slideUp 0.3s ease-out;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(20px) scale(0.9, 0.75);
    }
    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0) scale(0.9, 0.75);
    }
  }
  
  .batch-info {
    font-size: 14px;
    color: #262626;
    font-weight: 500;
  }
  
  .batch-actions {
    display: flex;
    gap: 12px;
  }
  
  .btn-batch {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .btn-cancel {
    background: #f5f5f5;
    color: #666;
  }
  
  .btn-cancel:hover {
    background: #e0e0e0;
  }
  
  .btn-upload {
    background: #1890ff;
    color: white;
  }
  
  .btn-upload:hover {
    background: #40a9ff;
  }
  
  .btn-download {
    background: #52c41a;
    color: white;
  }
  
  .btn-download:hover {
    background: #73d13d;
  }
  
  /* 复选框列样式 */
  .col-checkbox {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-4px);
  }
  
  .col-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  
  .col-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
  
  /* 文件项选中状态 */
  .file-item.selected {
    background: #e6f7ff;
    border-left: 3px solid #1890ff;
  }
  
  .file-item-checkbox {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-4px);
  }
  
  .file-item-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
  
  .file-item-checkbox input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
</style>
